<template>
    <div class="container">
     <div class="left">
       <div>
         <h1>ALL POSTER 这是我用过的最好的宣传平台工具</h1>
         <p>王铁锤, Google</p>
       </div>
     </div>
     <div class="right">
        <div class="right-content">
            <h1>欢迎回来</h1>
            <p>使用手机号和验证码登录到ALL Poster</p>
            <div>
              <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                status-icon
                label-width="auto"
                class="demo-ruleForm"
            >
                <el-form-item label="手机号" prop="tel">
                    <el-input
                        v-model="tel"
                        type="text"
                        autocomplete="off"
                    />
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                    <el-input v-model="code" />
                </el-form-item>

               <div class="submit">
                 <el-form-item>
                    <el-button type="primary" @click="submitForm">
                        登录
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handerCode">
                        获取验证码
                    </el-button>
                </el-form-item>
               </div>
            </el-form>
            </div>
        </div>
    </div>
                
</div>
</template>
<script lang="ts" setup>
import { reactive, ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {storeToRefs} from 'pinia'
import {useCounterStore} from '../stores/counter'

const userStore = useCounterStore()
const {tel,code} = storeToRefs(userStore)
const handerCode = userStore.handerCode
const submitForm = userStore.submitForm

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (tel.value !== 0) {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}
const rules = reactive<FormRules>({
  tel: [{ validator: validatePass, trigger: 'blur' }],
  code: [{validator: checkAge, trigger: 'blur' }],
})
const ruleFormRef = ref<FormInstance>()

</script>

<style lang="scss" scoped>
/**
两栏布局 左侧元素浮动
左侧元素设置宽度
右侧元素 距离 左侧元素 距离 是左侧元素的宽度
右侧元素宽度设置为auto
两栏布局
**/ 
.container{
    width: 100vw;
    height: 100vh;
   
    .left{
        float: left;
        width: 50vw;
        height: 100%;
        background: #000;
        position: relative;
        
        >div{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          color: #fff;
        }
        
    }
    .right{
        margin-left: 50%;
        width: auto;
        height: 100%;
        position: relative;
        .right-content{
            width: 8rem;
            height: 5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

          >div{
            width: 100%;
            height: 5rem;
            .el-form{
               font-size: 0.4rem;

               .el-form-item{
                font-size: 0.4rem;
               }
            }

            .submit{
              display: flex;
            }
          }
        }
    }
   
}
</style>
